<template>
  <div>
    <div class="container">
      <div class="title">
        <h3>{{titleHead}}</h3>
      </div>
      <div class="content">
        <div
          v-for="(item,index) in applicationList"
          :key="index"
          :style="{backgroundColor: item.bgColor}"
          @click="jumpUrl(item.url)"
          class="applicationBox">
          <i :class="item.icon"></i>
          <div class="name">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "forgetPwd",
        data() {
            return {
                titleHead: '账号安全中心',
                pageHeight: '',
                applicationList: [
                    { name: '找回账号', icon: 'el-icon-tickets', bgColor: '#4b97ff', url: '/forget/account'},
                    { name: '找回密码', icon: 'el-icon-document-checked', bgColor: '#0ccfcf', url: '/forget/password'},
                ],
            }
        },
        components: {

        },
        created() {
            this.getPageHeight();
        },
        methods: {
            // 获取页面高度
            getPageHeight() {
                this.pageHeight = document.documentElement.clientHeight;  // 页面高度
            },
            jumpUrl(router) {
                this.$router.push(router)
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../styles/common.scss';
  div{
    .container{
      padding: 20px 0 200px;
      .title{
        text-align: center;
        padding: 40px 0;
        h3{
          font-size: 1.5rem;
          font-weight: normal;
        }
      }
      .content{
        display: flex;
        justify-content: center;
        .applicationBox{
          padding: 16px 0 10px;
          width: 20%;
          min-height: 70px;
          color: #fff;
          margin: 0 10px;
          border-radius: 6px;
          text-align: center;
          cursor: pointer;
          i{
            font-size: 2rem;
          }
          .name{
            margin-top: 10px;
          }
        }
        .applicationBox:hover{
          box-shadow: 0 0 5px 1px #ccc;
          opacity: 0.8;
        }
      }
    }
  }
</style>